<template>
  <view class="container">
    <!-- 用户信息区域 -->
    <view class="user-info">
      <image
        class="avatar"
        src="/static/mine/avatar14.png"
        mode="aspectFill"
      ></image>
      <view class="user-details">
        <text class="nickname">昵称: {{ userInfo.customer.name || "--" }}</text>
        <text class="uid">UID: {{ userInfo.customer.id || "--" }}</text>
      </view>
    </view>

    <!-- VIP卡片 -->
    <swiper
      class="swiper-box"
      :autoplay="true"
      :interval="4000"
      :duration="500"
      style="height: 400rpx"
      v-if="userInfo.list.length > 0"
    >
      <swiper-item v-for="(item, index) in userInfo.list" :key="index">
        <view class="vip-card" @tap="toService(item)">
          <image :src="BASE_URL + item.equityUrfaceImage1" style="width: 100%;height: 100%"></image>

          <!-- <view class="vip-tag">{{ item.equityteName }}</view> -->
          <!-- <text class="vip-expire"
            >将于
            {{ parseTime(item.cardUseDeadLine, "{y}-{m}-{d}") }} 到期</text
          > -->
          <!-- <image
            class="crown-icon"
            src="/static/mine/crown.png"
            mode="aspectFit"
          ></image> -->
          <!-- <view class="vip-active-box">使用权益</view> -->
        </view>
      </swiper-item>
    </swiper>
    <swiper
      class="swiper-box"
      :autoplay="true"
      :interval="4000"
      :duration="500"
      style="height: 340rpx"
      v-else
    >
    <swiper-item>
      <view class="vip-card">
          <image src="/static/mine/beijingtu.png" style="width: 100%;height: 100%"></image>
          <view class="vip-tag position-title">当前暂无权益卡</view>
          <!-- <text class="vip-expire"
            >将于
            {{ parseTime(item.cardUseDeadLine, "{y}-{m}-{d}") }} 到期</text
          > -->
          <view class="vip-active-box" @tap="toActivePage">立即激活权益卡</view>
          <!-- <image
            class="crown-icon"
            src="/static/mine/crown.png"
            mode="aspectFit"
          ></image> -->
        </view>
    </swiper-item>
    </swiper>

    <!-- 服务记录 -->
    <view class="service-record">
      <text class="section-title">服务记录</text>
      <view class="record-items">
        <view class="record-item" @tap="toServiceLog('-1,0,1,2,3')">
          <image src="/static/mine/all.svg" mode="aspectFit"></image>
          <text>全部</text>
        </view>
        <view class="record-item" @tap="toServiceLog('0')">
          <image src="/static/mine/booked.svg" mode="aspectFit"></image>
          <text>已预约</text>
        </view>
        <view class="record-item" @tap="toServiceLog('1,2')">
          <image src="/static/mine/clz.svg" mode="aspectFit"></image>
          <text>处理中</text>
        </view>
        <view class="record-item" @tap="toServiceLog('3')">
          <image src="/static/mine/completed.svg" mode="aspectFit"></image>
          <text>已完成</text>
        </view>
        <view class="record-item" @tap="toServiceLog('-1')">
          <image src="/static/mine/cancelled.svg" mode="aspectFit"></image>
          <text>已取消</text>
        </view>
      </view>
    </view>

    <!-- 常用功能 -->
    <view class="common-functions">
      <text class="section-title">常用功能</text>
      <view class="function-items">
        <view class="function-item" @tap="openPrivacy">
          <image src="/static/mine/privacy.svg" mode="aspectFit"></image>
          <text>隐私条款</text>
        </view>
        <view class="function-item" @tap="openAgreement">
          <image src="/static/mine/agreement.svg" mode="aspectFit"></image>
          <text>用户协议</text>
        </view>
        <view class="function-item" @tap="aboutus">
          <image src="/static/mine/about.svg" mode="aspectFit"></image>
          <text>关于我们</text>
        </view>
        <view class="function-item" @tap="accountManage">
          <image src="/static/mine/account.svg" mode="aspectFit"></image>
          <text>账号管理</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { loginAuthorize, parseTime } from "/api/hook.js";
import { queryUserEquityCard, BASE_URL } from "/api/base.js";
import {
  ref,
  onMounted,
  computed,
  getCurrentInstance,
  beforeUnmount,
} from "vue";
const userInfo = ref({
  customer: {},
  list:[]
});
onMounted(async () => {
  loadData();
});

// 打开用户协议
const openAgreement = () => {
  // TODO: 跳转到用户协议页面
  uni.navigateTo({
    url: "/pageB/agreement/agreement",
  });
};

const openPrivacy = () => {
  // TODO: 跳转到用户协议页面
  uni.navigateTo({
    url: "/pageB/agreement/privacy",
  });
};
const aboutus = () => {
  uni.showToast({
    title: "敬请期待...",
    icon: "none",
  });
};
const accountManage = () => {
  uni.showToast({
    title: "敬请期待...",
    icon: "none",
  });
};

const loadData = async () => {
  uni.showLoading({
    title: "加载中...",
    mask: true,
  });
  const res = await queryUserEquityCard();
  if (res.data.state === "WX_USER_NOT_LOGIN") {
    const res = await loginAuthorize();
    uni.setStorageSync("WX_TOKEN", res.wxToken);
    loadData();
  } else {
    uni.hideLoading();
    if (res.data.state === "SUCCESS") {
      userInfo.value = res.data;
    } else {
      userInfo.value = null;
      uni.showToast({
        title: errorStatus[res.data.state] || "查询失败",
        icon: "error",
      });
    }
  }
};

const toServiceLog = (index = "-1,0,1,2,3") => {
  uni.navigateTo({
    url: "/pageB/servicelog/servicelog",
    success: function (res) {
      // 通过eventChannel向打开页面传送数据
      res.eventChannel.emit("activeData", {
        state: index,
      });
    },
  });
};

const toActivePage = () => {
		uni.navigateTo({
			url: "/pages/activeUser/index",
		});
	};

const toService = (row) => {
  uni.switchTab({
    url: "/pages/service/service?id=" + row.id,
  });
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  // padding: 20rpx;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 88rpx 30rpx;
  background-color: #40e0d0;
  border-radius: 0 0 88rpx 88rpx;
  position: relative;
  z-index: 1;
  .avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 60rpx;
    margin-right: 20rpx;
  }

  .user-details {
    display: flex;
    flex-direction: column;

    .nickname {
      font-size: 32rpx;
      color: #fff;
      margin-bottom: 10rpx;
    }

    .uid {
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.8);
    }
  }
}
.swiper-box{
  position: relative;
  top: -48rpx;
  z-index: 9;
}

.vip-card {
  // background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
  // padding: 40rpx 30rpx;
  // margin: 30rpx 20rpx 30rpx;
  height: 100%;
  width: 88%;
  margin: 0 auto;
  border-radius: 48rpx;
  position: relative;
  overflow: hidden;
  z-index: 9;
  .vip-tag {
    color: #d4af37;
    font-size: 36rpx;
    font-weight: bold;
    position: absolute;
    bottom: 88rpx;
    right: 48rpx;
  }
  .position-title{
    position: absolute;
    bottom: 118rpx;
    right: 70rpx;
  }

  .vip-expire {
    color: rgba(255, 255, 255, 0.6);
    font-size: 24rpx;
    position: absolute;
    bottom: 48rpx;
    right: 48rpx;
  }

  .crown-icon {
    position: absolute;
    right: 30rpx;
    top: 30rpx;
    width: 60rpx;
    height: 60rpx;
  }
}
.service-record{
  padding: 0 24rpx;
}
.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin: 30rpx 0 20rpx;
  display: inline-block;
}

.record-items,
.function-items {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  padding: 30rpx;
  border-radius: 20rpx;

  .record-item,
  .function-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    image {
      width: 60rpx;
      height: 60rpx;
      margin-bottom: 10rpx;
    }

    text {
      font-size: 24rpx;
      color: #333;
    }
  }
}

.common-functions {
  margin-top: 24rpx;
  padding: 0 24rpx;
}
.vip-active-box{
  width: 240rpx;
  height: auto;
  padding: 12rpx 24rpx;
  border-radius: 36rpx;
  font-size: 28rpx;
  color: #fff;
  background: #45b6b0;
  margin-top: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
    position: absolute;
    bottom: 48rpx;
    right: 48rpx;
}
</style>
